<template>
  <div class="home">
    <div class="title">欢迎使用剩余使用寿命预测系统（基于深度学习的RUL预测平台）</div>
    <div class="progress">
      <div class="sub-title">预测流程及简介：</div>
      <el-image :src="show" style="height: 500px;margin-top: 10px" />
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import { getDemo } from "@/api/demo/demo";
import { ref } from "vue";
import { DemoVO } from "@/api/demo/demo/types";
import show from "@/assets/images/show.png"

const demoTest = ref<DemoVO>();

const test = async () => {
  const res = await getDemo(1);
  demoTest.value = res.data;
}
</script>

<style scoped lang="scss">
/*11*/
.home {
  background-color: #1ab394;
  padding: 10px;
}
.title {
  color: #707070;
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 10px;
}
.progress {
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  height: 580px;
  background-color: #FFFFFF;
  padding: 10px;
}
.sub-title {
  color: #707070;
  font-size: 20px;
  font-weight: bold;
}
</style>
